<template>
  <el-dialog
    id="selectDepartment"
    title="选择门诊"
    :visible.sync="dialogVisible"
    width="20%"
    :show-close="show"
    :before-close="handleClose"
    :append-to-body="true"
    center
  >
    <el-cascader
      id="cascaders"
      ref="cascaderBox"
      v-model="clinicName"
      expand-trigger="hover"
      :show-all-levels="false"
      popper-class="cascaderClass"
      placeholder="请选择门诊"
      :options="clinicList"
      @change="selectChange"
      @visible-change="showOrHide"
    />
  </el-dialog>
</template>

<script>
// import Cookies from 'js-cookie'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    clinicList: {
      type: Array,
      required: true,
    },
    show: {
      type: Boolean,
      default: false,
    },
    clinicArray: {
      type: Array,
      required: false,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      clinicName: this.clinicArray,
    }
  },
  watch: {
    clinicName: {
      handler() {
        this.datePickerValue = JSON.parse(localStorage.getItem('selectClinic'))
      },
      immediate: true,
    },
  },
  created() {
    setTimeout(() => {
      this.$refs.cascaderBox.toggleDropDownVisible()
    }, 200)
  },
  methods: {
    showOrHide(e) {
      if (!e) {
        this.$refs.cascaderBox.toggleDropDownVisible()
      }
    },
    selectChange(e) {
      if (e) {
        this.$emit('select', e)
      }
    },
    handleClose() {
      if (this.show) {
        this.$emit('beforeclose', false)
      } else {
        return
      }
    },
  },
}
</script>

<style lang="scss" scoped>
#selectDepartments >>> .el-dialog {
  height: 29%;
  min-width: 380px;
}
#cascaders >>> .el-input__inner {
  display: none !important;
}
#cascaders >>> .el-input__suffix {
  display: none !important;
}
</style>
